<template>
  <div style="backgroundcolor: black">
    <van-nav-bar title="电影" :border="false" v-show="topStatus">
      <!-- 使用template作为一个容器，模板编译时不会被解析  -->
      <template #left>
        <span @click="goCityList">{{ cityName }}</span>
        <van-icon
          name="arrow-down"
          color="black"
          :size="5"
          style="margin-left: 5px"
        ></van-icon>
      </template>
    </van-nav-bar>
    <van-tabs
      title-active-color="#ff5f16"
      line-width="80"
      line-height="2"
      v-model="active"
    >
      <van-tab title="正在热映" to="/film/nowPlaying"></van-tab>
      <van-tab title="即将上映" to="/film/comingSoon"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, NavBar, Icon } from "vant";

Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  // 接收父传参
  props: {
    topStatus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // topStatus: false
      active: 0,
      // 城市名称
      cityName: localStorage.getItem("cityName")
        ? localStorage.getItem("cityName")
        : "北京",
    };
  },
  mounted() {
    let path = window.location.pathname;
    if (path === "/film/ComingSoon") this.active = 1;
  },
  methods: {
    goCityList() {
      // 传递一个参数 标识操作完成之后还跳转到原地址
      this.$router.push("/cityList?goto=" + window.location.pathname);
    },
  },
};
</script>

<style lang="scss" scoped>
// UI组件库样式有作用域，默认可能无法修改，可以通过样式穿透的方式进行修改  ::deep
::v-deep .van-tab {
  font-size: 16px;
}
::v-deep .van-tabs__line {
  background-color: pink;
}
</style>
